<template>
  <div class="section-wrap hiddenlc">
    <!-- 头部 -->
    <div class="headerBox">
      <div class="header">
        <x-icon type="ios-arrow-left"
                size=""
                class="icon-white"
                @click="goBack"></x-icon>
        问题整改
      </div>
    </div>
    <div class="form-section" style="margin-top: 40px;">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>问题编号</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.hiddenDangerNum}}</p>
        </div>

      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>问题类别</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.hiddenDangerType}}</p>
          <!-- <input type="text" 
                 placeholder="请选择" disabled
                 v-model="detailinfo.hiddenDangerType"
          >
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon> -->
        </div>
      </div>
      <!-- <div class="form-item form-item-style1">
        <div class="label-title">
          <label>问题级别</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.hiddenDangerLevel}}</p>
        </div>
      </div> -->
      <div class="form-item form-item-style1" style="flex-direction:column;align-items: left;height: auto;">
        <div class="label-title" style="width:100%;justify-content: space-between;">
          <label>问题描述</label>
        </div>
        <div style="width: 100%">
         <!-- <textarea  style="width: 100%" placeholder="请输入回复（自行换行)" disabled
         v-model="detailinfo.hiddenDangeDescription"
         ></textarea> -->
         <div style="min-height:60px;width: 100%;font-size:13px;line-height:20px;margin-bottom:20px;color:#666;">
           {{detailinfo.hiddenDangeDescription}}
         </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="info_div2">
        <div class="form-item">
          <div class="input_div">
            <div><span>整改前信息</span>
              <x-icon type="ios-arrow-up"
                      size="22"
                      class="icon-up"></x-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="form-item form-item-style2" style="overflow: hidden;">
        <div class="label-title space-between">
          <div class="space-between">
            <label>整改前图片</label>
          </div>
          <span>当前共{{detailinfo.projectImgList!=null?detailinfo.projectImgList.length:0}}张照片</span>
        </div>
        <div>
          <div class="upload-wrap"
          >
            <div class="upload-item"
                 v-for="(item,index) in detailinfo.projectImgList"
                 :key="index">
              <img :src="item.url"
                   @click="previewImg(item.url)"
                   alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="form-item form-item-style1" style="flex-direction:column;align-items: left;height: auto;">
        <div class="label-title" style="width:100%">
          <label>整改要求</label>
        </div>
        <div style="width: 100%">
         <!-- <textarea  style="min-height:60px;width: 100%" placeholder="请输入回复（自行换行)" disabled
         v-model="detailinfo.measure"
         ></textarea> -->
         <div style="min-height:60px;width: 100%;font-size:13px;line-height:20px;margin-bottom:20px;color:#666;">
           {{detailinfo.measure}}
         </div>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改开始时间</label>
        </div>
        <div class="input_div">
          <p>{{startDate}}</p>
        </div>
        <!-- <group>
          <datetime v-model="startDate" clear-text="清除" disabled  @on-clear="clearStartDate" format="YYYY-MM-DD"></datetime>
        </group> -->
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改期限</label>
        </div>
        <div class="input_div">
          <p>{{endDate}}</p>
        </div>
        <!-- <group>
          <datetime v-model="endDate" clear-text="清除"  @on-clear="clearEndDate" format="YYYY-MM-DD"></datetime>
        </group> -->
      </div>
      <!-- <div class="form-item form-item-style1">
        <div class="label-title">
          <label>问题部位</label>
        </div>
        <div class="input_div">
          <p class="rows">{{detailinfo.hiddenDangePart}}</p>
        </div>
      </div> -->
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改责任人</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.zgZrrName?detailinfo.zgZrrName:'----'}}</p>
          <!-- <input type="text"
                 placeholder="请选择" disabled
                 v-model="detailinfo.zgZrrName"
          >
          <x-icon type="ios-arrow-right" size="22" class="icon-right" ></x-icon> -->
        </div>
      </div>
      <!-- <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改单位</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.zgDeptName?detailinfo.zgDeptName:'----'}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改执行人</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.zgZxrName?detailinfo.zgZxrName:'----'}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改班组</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.zgGroupName?detailinfo.zgGroupName:'----'}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改班组负责人</label>
        </div>
        <div class="input_div">
          <p >{{detailinfo.zgGroupFzrname?detailinfo.zgGroupFzrname:'----'}}</p>
        </div>
      </div> -->
      <div class="line"></div>
      <div class="info_div2">
        <div class="form-item">
          <div class="input_div">
            <div><span>检查人信息</span>
              <x-icon type="ios-arrow-up"
                      size="22"
                      class="icon-up"></x-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查单位</label>
        </div>
        <p>{{detailinfo.checkDeptName}}</p>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查人</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.checkPerson}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>电话</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.telephone}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>检查时间</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.checkTime | initDate}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被检查单位</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.bcheckDeptName ? detailinfo.bcheckDeptName : '----'}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被检查单位负责人</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.bcheckDeptFzr ? detailinfo.bcheckDeptFzr : '----'}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>所属上级单位</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.parentDeptName ? detailinfo.parentDeptName : '----'}}</p>
        </div>
      </div>
      <div class="line"></div>
      <!-- 加载整改和验收信息,区分当前整改和验收状态 -->
      <div v-for="(model, index) in detailinfo.rectifyList" :key="model.id">
        <div class="zhenggai" v-if="index < zgInfoLength">
          <div class="info_div2">
            <div class="form-item">
              <div class="input_div">
                <div><span>整改信息</span>
                  <span v-if="detailinfo.rectifyList.length>1">(第{{index+1}}次)</span>
                  <x-icon type="ios-arrow-up" size="22" class="icon-up"></x-icon>
                </div>
              </div>
            </div>
          </div>
          <div class="form-item form-item-style1" style="flex-direction:column;align-items: left;height: auto;">
            <div class="label-title" style="width:100%;justify-content: space-between;">
              <label>整改情况回复</label>
            </div>
            <div  style="min-height:60px;font-size:13px;color:#666666;line-height: 20px;margin-bottom:10px;width:100%;">
              {{model.rectificationRemark}}
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>实际完成时间</label>
            </div>
            <div class="input_div">
              <p>{{model.rectificationDate | initDate}}</p>
            </div>
          </div>
          <div class="form-item form-item-style2" style="overflow:hidden;">
            <div class="label-title space-between">
              <div class="space-between">
                <label>整改后图片</label>
              </div>
              <span>当前共{{model.zgPhotoList!=null?model.zgPhotoList.length:0}}张照片</span>
            </div>
            <div>
              <div class="upload-wrap">
                <div class="upload-item"
                    v-for="(item,index) in model.zgPhotoList"
                    :key="index">
                  <img :src="item.url"
                      @click="previewImg(item.url)"
                      alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="yanshou" v-if="index < ysInfoLength">
          <div class="info_div2">
            <div class="form-item">
              <div class="input_div">
                <div><span>验收信息</span>
                  <span v-if="detailinfo.rectifyList.length>1">(第{{index+1}}次)</span>
                  <x-icon type="ios-arrow-up"
                          size="22"
                          class="icon-up"></x-icon>
                </div>
              </div>
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>验收负责人</label>
            </div>
            <div class="input_div">
              <p>{{model.checkPerson}}</p>
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>验收结果</label>
            </div>
            <div class="input_div">
              <p>{{model.checkVerdict}}</p>
            </div>
          </div>
          <div class="form-item form-item-style1" style="flex-direction:column;align-items: left;height: auto;">
            <div class="label-title" style="width:100%;justify-content: space-between;">
              <label>验收情况回复</label>
            </div>
            <div  style="min-height:60px;font-size:13px;color:#666666;line-height: 20px;margin-bottom:10px;width:100%;">
              {{model.ckeckRemark}}
            </div>
          </div>
          <div class="form-item form-item-style1">
            <div class="label-title">
              <label>实际完成时间</label>
            </div>
            <div class="input_div">
              <p>{{model.checkDate | initDate}}</p>
            </div>
          </div>
          <div class="form-item form-item-style2" style="overflow:hidden;">
            <div class="label-title space-between">
              <div class="space-between">
                <label>验收图片</label>
              </div>
              <span>当前共{{model.ysPhotoList!=null?model.ysPhotoList.length:0}}张照片</span>
            </div>
            <div>
              <div class="upload-wrap"
              >
              <div class="upload-item"
                    v-for="(item,index) in model.ysPhotoList"
                    :key="index">
                  <img :src="item.url"
                      @click="previewImg(item.url)"
                      alt="">
                  <!-- <span @click="removeImg(item.name,index)"></span> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      <!-- s -->
      </div>
      <div class="line"></div>
      <div class="info_div2">
        <div class="form-item">
          <div class="input_div">
            <div><span>整改后信息</span>
              <x-icon type="ios-arrow-up"
                      size="22"
                      class="icon-up"></x-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="form-item form-item-style1" style="flex-direction:column;align-items: left;height: auto;">
        <div class="label-title" style="width:100%;justify-content: space-between;">
          <label>整改情况回复<i class="iconfont icon-required"></i></label>
        </div>
        <div style="width: 100%">
         <!-- <textarea  style="width: 100%" placeholder="请输入回复（自行换行)"
         ></textarea> -->
          <x-textarea :max="200" name="description" placeholder="请输入回复(自动换行)" v-model="zgDetailInfo.rectificationRemark" id="tt"></x-textarea>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>实际完成时间</label>
          <i class="iconfont icon-required"></i>
        </div>
        <group>
          <datetime v-model="rectificationDate" clear-text="清除"  @on-clear="clearRectificationDate" format="YYYY-MM-DD"></datetime>
        </group>
      </div>
      <div class="form-item form-item-style2">
        <div class="label-title space-between">
          <div class="space-between">
            <label>整改后图片<i class="iconfont icon-required"></i></label>
          </div>
          <span>当前共{{zgDetailInfo.zgPhotoList!=null?zgDetailInfo.zgPhotoList.length:0}}张照片</span>
        </div>
        <div>
          <div class="upload-wrap">
            <upload 
              :imgList="zgDetailInfo.zgPhotoList"
              @setFormData="setYSFormData"
              :type="'1'"
              :recordId="zgDetailInfo.id"
            ></upload>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="info_div2">
        <div class="form-item">
          <div class="input_div">
            <div><span>抄送信息</span>
              <x-icon type="ios-arrow-up"
                      size="22"
                      class="icon-up"></x-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>抄送人员</label>
        </div>
        <div class="input_div">
          <p>{{detailinfo.copytoPersonName ? detailinfo.copytoPersonName : '----'}}</p>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="flag"  fullscreen center>
       <img :src="selectImg" alt="" width="100%">
    </el-dialog>
    <!--開始標籤-->
    <div class="btns">
      <button @click="handleSubmit()">提 交</button>
    </div>
  </div>
</template>
<script>
  import formatDate from "@/utils/formatDate";
  import upload from "@/commonComponents/upload/uploadlc";
  import ztree from "@commonComponents/tree"
  import selectDepart from "@commonComponents/selectUser/selectUser";

  import {
    XHeader,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    TransferDom,
    Popup

  } from "vux";

  export default {
    data() {
      return {
        startDate: "", // 整改开始时间
        endDate: "", // 整改期限
        rectificationDate: "", // 整改完成时间
        zgDetailInfo: {},
        zgInfoLength: 0,
        ysInfoLength: 0,
        selectImg: '',
        accopt1: [['已整改', '待整改']],
        wordFlag:true,
        flag: false,
        preview: "",
        baseurl: this.$axiosAjax.baseurl,
        classValue2: false,
        checkedList: [],
        lis: [{checkedList: [],}],
        index: '',
        dataList: [],
        def: {
          children: 'children',
          label: "quantizeName"
        }, classValue: false,
        classValue1: false,
        selectDepartType: 0,
        typeNum: "",
        classValue: false,
        isdisable: false,
        show1: false,
        data: [
          {
            id: 1,
            departName: "",
            departType: "",
            departSir: "",
            children: [
              {
                id: 1,
                departName: "",
                departType: "",
                departSir: ""
              }
            ]
          }
        ],
        YSFormData: "",
        YSuploadLength: "",
        accopt: [["是", "否"]],
        accoptVal: ["是"],
        overTime: formatDate(),
        projectImgList1: [],
        detailinfo: {}
      };
    },
    filters: {
      initDate (val) {
        if (!val) return '';
        return val.substring(0,10);
      }
    },
    mounted() {
      let that = this;
      this.$bridge.registerHandler("setToken", function (data) {
        that.$store.state.Authorization =
          "Bearer " + data.result.accessToken;
        //这里data ioS返回的是token值(字符串)
        this.getInfo();
        that.preview = new Date().getTime();
        if (that.$route.query.id == '') {
          that.isdisable = false;
        } else {
          that.isdisable = true;
        }
      });

      this.connectWebViewJavascriptBridge(function (bridge) {
        bridge.init(function (message, responseCallback) {
        });

        bridge.registerHandler("setToken", function (data) {
          that.$store.state.Authorization =
            "Bearer " + data.result.accessToken;
          that.preview = new Date().getTime();
          this.getInfo();
          if (that.$route.query.id == '') {
            that.isdisable = false;
          } else {
            that.isdisable = true;
          }
          //这里data android返回的是token值(字符串)

        });
      });
    },
    created() {
      this.getInfo();
      this.preview = new Date().getTime();

      if (this.$route.query.id == '') {
        this.isdisable = false;
      } else {
        this.isdisable = true;
      }

    },
    components: {
      ztree,
      Popup,
      selectDepart,
      upload
    },
    directives: {
      TransferDom
    },
    methods: {
      connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
          callback(WebViewJavascriptBridge);
        } else {
          document.addEventListener(
            "WebViewJavascriptBridgeReady",
            function () {
              callback(WebViewJavascriptBridge);
            },
            false
          );
        }
      },
      previewImg(url){//图片预览
        this.selectImg=url
        this.flag=true
      },
      getyear() {
        return new Date().getFullYear() + '-' + new Date().getMonth() + '-' + new Date().getDate();
      },
      getCheckedNodes() {//
        this.checkedList = this.$refs.tree.getCheckedNodes()
        let i = [];
        this.checkedList.forEach(item => {
          i.push(item.id);
        })
        this.lis[this.index].standardNameList = this.checkedList.map(x => x.quantizeName).join(',');
        this.lis[this.index].standardIdList = this.checkedList.map(x => x.id).join(',');
        this.checkedList = i
        this.lis[this.index].checkedList = i
        this.classValue2 = false
      },
      goBack() {
        this.$router.go(-1);
      },
      getInfo() {

        let id = this.$route.query.id;
        let rocordId = this.$route.query.rocordId;
        let departId = this.$route.query.departid;
        this.$axiosAjax
          .getHiddenInfo({
            hiddenDangerInfoId: id
          })
          .then(res => {

            if (res.data.success == true) {
              this.detailinfo = res.data.result;
              if (this.detailinfo.status == '1') {
                this.zgInfoLength = this.detailinfo.rectifyList.length - 1;
                this.ysInfoLength = this.detailinfo.rectifyList.length - 1;
              } else if (this.detailinfo.status == '2') {
                this.zgInfoLength = this.detailinfo.rectifyList.length;
                this.ysInfoLength = this.detailinfo.rectifyList.length - 1;
              } else {
                this.zgInfoLength = this.detailinfo.rectifyList.length;
                this.ysInfoLength = this.detailinfo.rectifyList.length;
              }
              // 整改开始/结束时间
              this.startDate = res.data.result.zgStartTime.substring(0,10);
              this.endDate = res.data.result.zgEndTime.substring(0,10);
              // 获取已经整改相关信息
              if (this.detailinfo.rectifyList.length !== 0) {
                let len = this.detailinfo.rectifyList.length;
                // 获取整改情况中最后一个数组元素，为验收提交信息
                this.zgDetailInfo = this.detailinfo.rectifyList[len - 1];
                // 整改实际时间
                this.rectificationDate = this.zgDetailInfo.rectificationDate.substring(0,10);
                // 判断接口返回的整改时间是否为系统初始时间，若为初始时间，则整改日期初始化为当日
                if (this.rectificationDate.indexOf('0001') > -1) {
                  this.rectificationDate = formatDate();
                }
              }
            }
          })
          .catch(err => {
          });
      },
      handleSubmit() {
        // 提交值type设置成'zg'
        this.detailinfo.type = 'zg';
        let p = this.detailinfo;
        this.detailinfo.rocordId = this.$route.query.rocordId;
        this.detailinfo.zgStartTime = this.startDate + " 00:00:00";
        this.detailinfo.zgEndTime = this.startDate + " 00:00:00";
        // 整改情况回复
        if (!this.zgDetailInfo.rectificationRemark) {
          this.$vux.alert.show({
            content: '请输入整改回复情况！',
            dialogTransition: ''
          });
          return false;
        }
        // 整改日期不晚于当日
        if (new Date(this.rectificationDate).getTime() - new Date(this.overTime).getTime() < 0) {
          this.$vux.alert.show({
            content: '整改时间不得晚于当日！',
            dialogTransition: ''
          });
          return false;
        }
        if (!this.rectificationDate) {
          this.$vux.alert.show({
            content: '请选择整改日期！',
            dialogTransition: ''
          });
          return false;
        }
        // 上传整改图片
        if (this.zgDetailInfo.zgPhotoList && this.zgDetailInfo.zgPhotoList.length == 0) {
          this.$vux.alert.show({
            content: '请上传整改图片！',
            dialogTransition: ''
          });
          return false;
        }
        this.zgDetailInfo.rectificationDate = this.rectificationDate + ' 00:00:00';
        // 校验信息完毕，开始进行提交操作
        let _this = this;
        this.$axiosAjax
          .submitHiddenDangerInfoAPP(p)
          .then(res => {
            if (res.data.success == true) {
              this.$vux.alert.show({
                content: '提交成功',
                dialogTransition: '',
                onHide () {
                  // 关闭时返回上一页面
                  _this.$router.go(-1);
                }
              });
            }
          })
          .catch(err => {
          })
      },
      getUserList() {
        this.$axiosAjax.getUserList({}).then((res) => {
          if (res.data.success == true) {
            this.data = res.data.result.items
          }
        }).catch(
          (err) => {
          }
        )
      },
      removeImg(name, index) {
        this.projectImgList1.splice(index, 1);
      },
      clearEndDate() {
        this.endDate = "";
      },
      clearStartDate() {
        this.startDate = "";
      },
      clearRectificationDate() {
        this.rectificationDate = "";
      },
      // 上传组件传过来的
      setYSFormData (uploadLength, file) {
        // 获取验收图片上传后的id信息
        var ids = []
        for(var k of file){
            ids.push(k.id)
        }
        this.zgDetailInfo.zgPhotoList = ids;
      }
    }
  };
</script>
<style lang="less" scoped>
  .worldHide{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
  }
  .info_div2 {
    .form-item {
      height: auto;
    }
  }
  .weui-cells {
    .vux-x-textarea {
      width: 100%;
    }
  }

  .form-item {
    .input_div {
      .vux-x-icon {
        fill: #999;
        float: right;
        margin-top: 10px;
      }
    }
    .vux-cell-box:not(:first-child):before {
      border: none !important;
    }
    .vue-cell-box {
      .weui-cell {
        padding-right: 0 !important;
        border: 0 !important;
      }
    }
    #tt {
      background-color: #fff;
      .weui-cell__bd {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
    }
    .upload-wrap {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .line_20 {
      line-height: 20px;
    }
  }

  .line {
    height: 5px;
    background: #ebeef2;
  }
</style>
<style lang="less">
.hiddenlc {
  .form-item {
    .input_div {
      .vux-x-icon {
        fill: #999;
        float: right;
        margin-top: 10px;
      }

    }
    #tt {
      background-color: #fff;
      .weui-cell__bd {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
<style lang="less">
.hiddenlc .vux-cell-box .weui-cell {
  padding-right: 0 !important;
  border: 0 !important;
}
.hiddenlc .vux-cell-box:not(:first-child):before {
  border: none !important;
}
.hiddenlc .rows {
  height: 40px;
  line-height: 40px;
  overflow-y: hidden !important;
}
.hiddenlc .rows::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-left: 1px solid rgba(0, 0, 0, 0);
}
.hiddenlc .rows::-webkit-scrollbar {
  width: 5px;
  height: 4px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.hiddenlc .rows::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-height: 28px;
}
.hiddenlc .rows::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
</style>